<template>
	<view>
		<view class="header-card-c">
			<view class="button-group">
				<!-- 			<button class="btn btn-primary" @click="handleScanWeigh">
					<uni-icons type="scan" size='mini' color="#fff"></uni-icons>
					扫码下料
				</button> -->
				<button class="btn btn-secondary" @click="handleSearchCode">
					<uni-icons type="search" size='mini' color="#fff"></uni-icons>
					扫码下料
				</button>
				<button class="btn-c" style="margin-left: auto;" @click="handleRefresh">
					<uni-icons type="refresh" size='mini' color="#757575"></uni-icons>
					刷新
				</button>
			</view>
		</view>
		<view class="content">
			<uni-table border stripe emptyText="暂无数据">
				<uni-tr>
					<uni-th width="100" align="center">子件代码</uni-th>
					<uni-th width="100" align="center">物料名称</uni-th>
					<!-- <uni-th width="100" align="center">比例</uni-th> -->
					<!-- <uni-th width="100" align="center">比例用量</uni-th> -->
					<uni-th width="100" align="center">称重量</uni-th>
					<!-- <uni-th width="100" align="center">本次累计称重</uni-th> -->
					<!-- <uni-th width="100" align="center">工单累计称重</uni-th> -->
					<uni-th width="50" align="center">单位</uni-th>
					<uni-th width="100" align="center">料属性</uni-th>
					<uni-th width="50" align="center">子件规格</uni-th>
					<!-- <uni-th width="50" align="center">密度</uni-th> -->
					<!-- <uni-th width="120" align="center">子件用量类型</uni-th> -->
					<!-- <uni-th width="80" align="center">母件基数</uni-th> -->
					<!-- <uni-th width="60" align="center">损耗率</uni-th> -->
					<!-- <uni-th width="50" align="center">用量</uni-th> -->
					<!-- <uni-th width="80" align="center">未领数量</uni-th> -->
					<uni-th width="70" align="center">下料人</uni-th>
					<uni-th width="100" align="center">下料日期</uni-th>
					<uni-th width="40" align="center">称重</uni-th>

					<uni-th width="40" align="center">主胶</uni-th>
				</uni-tr>
				<uni-tr v-if="tabloading2">
					<uni-td :colspan="17" align="center">
						<view class="loading-container">
							<uni-load-more status="loading" content="加载中..."></uni-load-more>
						</view>
					</uni-td>
				</uni-tr>
				<uni-tr v-for="(material, materialIndex) in weighingMasterListFinishedDetail" :key="materialIndex">
					<uni-td title='子件代码' align="center">{{ material.produceOrderDetail.subMaterialId ||
						'-' }}</uni-td>
					<uni-td title='物料名称' align="center">{{ material.produceOrderDetail.materialName ||
						'-' }}</uni-td>
					<!-- <uni-td title='比例' align="center">{{ material.bl || '-' }}</uni-td> -->
					<!-- <uni-td title='比例用量' align="center">{{ material.blyl || '-' }}</uni-td> -->
					<uni-td title='称重量' align="center">{{ material.cuQuantity || '-' }}</uni-td>
					<!-- 
									<uni-td title='本次累计称重' align="center">{{
										material.cumulativeQuantity
										|| '-' }}</uni-td> -->
					<uni-td title='单位' align="center">{{ material.produceOrderDetail.unitId || '-'
					}}</uni-td>
					<uni-td title='料属性' align="center">{{ material.produceOrderDetail.materialType ||
						'-' }}</uni-td>
					<!-- <uni-td title='工单累计称重'
						align="center">{{ cuQuantity(material.weighingDetailList ).cuTotalQuantity || '-' }}</uni-td> -->
					<uni-td title='子件规格' align="center">{{ material.produceOrderDetail.subMaterialSpec
						|| '-' }}</uni-td>
					<!-- <uni-td title='密度' align="center">{{ null || '-' }}</uni-td> -->
					<!-- <uni-td title='子件用量类型' align="center">{{ null || '-' }}</uni-td> -->
					<!-- <uni-td title='母件基数' align="center">{{ null || '-' }}</uni-td> -->

					<!-- <uni-td title='损耗率' align="center">{{ null || '-' }}</uni-td> -->
					<!-- <uni-td title='用量' align="center">{{ material.produceNeedQty || '-' }}</uni-td> -->
					<!-- <uni-td title='未领数量' align="center">{{ material.remainTakeQty || '-' }}</uni-td> -->

					<uni-td title='下料人' align="center">{{ material.creatorName || '-' }}</uni-td>
					<uni-td title='下料日期' align="center">{{
						convertGMTToChinaTime(material.cuCzTime) }}</uni-td>
					<uni-td title='称重' align="center">
						<view class="status-tag"
							:class="getMaterialStatusClass(material.produceOrderDetail.isWeighing)">
							{{ getMaterialStatusText(material.produceOrderDetail.isWeighing) }}
						</view>
					</uni-td>
					<uni-td title='主胶' align="center">
						<view class="status-tag"
							:class="getMaterialStatusClass(material.produceOrderDetail.isMainMaterial)">
							{{ getMaterialStatusText(material.produceOrderDetail.isMainMaterial) }}
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<showInputPop :show.sync="showPopup" title="物料编码查询" label="物料编码" placeholder="请输入物料编码" @confirm="onConfirm"
			@close="onClose" />
		<loading :show="Loading" />
	</view>
</template>

<script>
import {
	toast
} from '@/utils/common';
import {
	WeighingMaster006ByBillNo,
	updatescanWeighingDetail
} from '@/api/work/blanking';
import showInputPop from '@/components/showInputPop.vue';
import loading from '@/components/loading/loading.vue';
export default {
	components: {
		loading,
		showInputPop
	},
	data() {
		return {
			billNo: null,
			showPopup: false,
			Loading: false,
			tabloading2: false,
			detailsList: [],
			weighingMasterList: [],
			weighingMasterListFinishedDetail: [],
		}
	},
	onLoad(options) {
		if (options.billNo) {
			this.billNo = options.billNo
			this.queryWeighingMaster006ByBillNo(this.billNo);
		}
	},
	methods: {
		queryWeighingMaster006ByBillNo(billNo) {
			this.Loading = true
			WeighingMaster006ByBillNo(billNo).then(res => {
				console.log(res, "resres")
				this.Loading = false
				// this.weighingMasterList = res.data
				console.log(this.weighingMasterList, "this.weighingMasterList ")
				this.weighingMasterListFinishedDetail = res.data.details
				console.log(this.weighingMasterListFinishedDetail, "this.weighingMasterListFinishedDetail ")
			}).catch(err => {
				this.Loading = false
				toast(err.msg | '获取失败')
			})
		},
		// 获取物料状态样式
		getMaterialStatusClass(status) {
			return status ? 'material-status-active' : 'material-status-inactive';
		},
		// 获取物料状态文本
		getMaterialStatusText(status) {
			return status ? '是' : '否';
		},

		handleRefresh() {
			this.queryWeighingMaster006ByBillNo(this.billNo);
		},

		handleSearchCode() {
			this.showPopup = true
		},
		onConfirm(value) {
			console.log('输入的内容：', value);
			this.showPopup = false
			this.filterDate(value)
		},

		filterDate(itemId) {

			let data = this.weighingMasterListFinishedDetail.find(item => item.cuMaterialId == itemId)
			if (data) {
				console.log(data, "data");
				updatescanWeighingDetail(data.billNo, data.rowCode).then(res => {
					console.log(res);
					this.queryWeighingMaster006ByBillNo(this.billNo);
					toast(res.msg | '操作成功')
				}).catch(err => {
					console.log(err);
					toast(err.msg | '操作失败')
				})

			} else {
				toast('单号错误')
			}

		},

		onClose() {
			console.log('弹窗关闭');
			this.showPopup = false
		},
		/**
	 * 将格林威治时间字符串转换为中国时间
	 * @param {string} gmtTime - 格林威治时间字符串，格式如：20251127174332
	 * @param {Object} options - 可选参数
	 * @param {boolean} options.includeTime - 是否包含时间部分，默认true
	 * @param {string} options.separator - 日期时间分隔符，默认空格
	 * @returns {string} 格式化后的中国时间字符串
	 */
		convertGMTToChinaTime(timeStr, options = {}) {


			let gmtTime = String(timeStr)

			const {
				includeTime = true,
				separator = ' '
			} = options;
			// 验证输入格式
			if (!gmtTime || typeof gmtTime !== 'string' || gmtTime.length !== 14) {
				return '-'
			}

			// 解析时间字符串
			const year = gmtTime.substring(0, 4);
			const month = gmtTime.substring(4, 6);
			const day = gmtTime.substring(6, 8);
			const hour = gmtTime.substring(8, 10);
			const minute = gmtTime.substring(10, 12);
			const second = gmtTime.substring(12, 14);

			// 创建UTC时间对象
			const utcDate = new Date(Date.UTC(
				parseInt(year),
				parseInt(month) - 1, // 月份从0开始
				parseInt(day),
				parseInt(hour),
				parseInt(minute),
				parseInt(second)
			));

			// 转换为中国时间（UTC+8）
			const chinaTime = new Date(utcDate.getTime() + 0 * 60 * 60 * 1000);

			// 格式化输出
			if (includeTime) {
				return this.formatDateTime(chinaTime, separator);
			} else {
				return this.formatDate(chinaTime);
			}
		},

		/**
		 * 格式化日期时间
		 * @param {Date} date - 日期对象
		 * @param {string} separator - 分隔符
		 * @returns {string} 格式化后的日期时间字符串
		 */
		formatDateTime(date, separator = ' ') {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			const second = String(date.getSeconds()).padStart(2, '0');

			return `${year}-${month}-${day}${separator}${hour}:${minute}:${second}`;
		},

		/**
		 * 仅格式化日期部分
		 * @param {Date} date - 日期对象
		 * @returns {string} 格式化后的日期字符串
		 */
		formatDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');

			return `${year}-${month}-${day}`;
		}
	}
}
</script>
<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.container {
	padding: 20rpx;
	box-sizing: border-box;

	&.tablet-layout {
		padding: 30rpx;
		margin: 0 auto;
	}
}

.header-card {
	background: linear-gradient(135deg, #007AFF, #0056CC);
	border-radius: 16rpx;
	padding: 20rpx 20rpx;
	color: white;
	margin-bottom: 15rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);

	.tablet-layout & {
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
	}
}

.header-card-a {
	border-radius: 16rpx;
	color: white;
	margin-bottom: 15rpx;

	.tablet-layout & {
		margin-bottom: 10rpx;
		padding: 20rpx 20rpx;
	}
}

.header-card-c {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	color: white;
	margin-bottom: 15rpx;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

	.tablet-layout & {
		margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
	}
}

.header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.title-section {
	flex: 1;
}

.main-title {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.sub-title {
	font-size: 28rpx;
	opacity: 0.9;
}

.status-badge {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: bold;
	background: rgba(255, 255, 255, 0.2);
}

.basic-info-grid {
	display: flex;
	justify-content: flex-start;
	gap: 30rpx;

	.tablet-layout & {
		gap: 15rpx;
	}
}

.basic-info-item {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	margin-right: 15rpx;
}

.basic-info-label {
	font-size: 28rpx;
	opacity: 0.8;
	color: #000000;
}

.basic-info-value {
	font-size: 28rpx;
	font-weight: 500;
}

// 表格样式
.material-table-container {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	padding-top: 10rpx;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.table-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.table-count {
	font-size: 26rpx;
	color: #666;
}

// 自定义表格样式
::v-deep .uni-table {
	width: 100%;
	font-size: 24rpx;
}

::v-deep .uni-table-th {
	background-color: #f8f9fa !important;
	font-weight: bold;
	color: #333;
	padding: 15rpx;
}

::v-deep .uni-table-td {
	padding: 15rpx;
	color: #666;
}

::v-deep .uni-table-tr {
	border-bottom: 1rpx solid #f0f0f0;
}

::v-deep .uni-table-striped .uni-table-tr:nth-child(even) {
	background-color: #f8f9fa;
}

.status-tag {
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 500;
	display: inline-block;
}

.material-status-active {
	background: #34C759;
	color: white;
}

.material-status-inactive {
	background: #999;
	color: white;
}

.value-highlight {
	color: #007AFF;
	font-weight: bold;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8rpx;
}

.btn-xs {
	padding: 0 20rpx;
	font-size: 22rpx;
}

.btn-primary {
	background: #007AFF;
	color: white;
}

.btn-primary:disabled {
	background: #CCCCCC;
	color: #999;
}

.btn-secondary {
	background: #F8F8F8;
	color: #007AFF;
	border: 2rpx solid #007AFF;
}

.action-buttons {
	display: flex;

	&.tablet-buttons {
		margin-left: auto;
		margin-right: auto;
	}

	.btn {
		flex: 1;
		font-size: 32rpx;
	}
}

.header-card-c {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.button-group {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 12rpx;
	flex: 1;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	max-width: 220rpx;
	margin: 0;
	margin-right: 20rpx;
	padding: 0;
}

.btn-c {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 12rpx;
	flex: 1;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	max-width: 180rpx;
	margin: 0;
	margin-right: 20rpx;
	padding: 0;
}

.btn-primary {
	background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
	color: white;
}

.btn-primary:active {
	background: linear-gradient(135deg, #FF5252, #FF7B7B);
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
}

.btn-secondary {
	background: linear-gradient(135deg, #4ECDC4, #6EE7E7);
	color: white;
}

.btn-secondary:active {
	background: linear-gradient(135deg, #26A69A, #4ECDC4);
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.4);
}

.btn-refresh {
	width: 60rpx;
	height: 60rpx;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #cecece, #cecece);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(255, 167, 38, 0.3);
	transition: all 0.3s ease;
	flex-shrink: 0;
	margin: 0;
	margin-left: auto;
}

.example-body {
	flex-direction: column;
	flex: 1;
}

.content {
	padding: 15px;
	padding-top: 0;
}

.text {
	font-size: 14px;
	color: #666;
	line-height: 20px;
}

.button {
	// margin-top: 10px;
	margin: 10px;
	margin-bottom: 0;
}


.data_null {
	padding: 50rpx 0;
	height: 50rpx;
	background-color: #e9e9e9;
	font-size: 32rpx;
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>